<!--
 * @Author: xuhy 1727317079@qq.com
 * @Date: 2022-09-04 09:48:48
 * @LastEditors: xuhy 1727317079@qq.com
 * @LastEditTime: 2022-09-08 11:34:01
 * @FilePath: \vue3_test\src\App.vue
 * @Description: Demo
-->
<template>
  <h1>一个人的信息</h1>
  姓: <input type="text" v-model="person.firstName" /> <br /><br />
  名:
  <input type="text" v-model="person.lastName" />
  <br />
  <br />
  <span>全名: {{ person.fullName }}</span>
  <br /><br />
  全名: <input type="text" v-model="person.fullName" />
</template>

<script>
import { reactive, computed } from "vue";
export default {
  name: "DemoTest",
  setup() {
    let person = reactive({
      firstName: "张",
      lastName: "三",
      age: 18,
    });

    // 计算属性-简写(没有考虑计算属性被修改的情况)
    /*  person.fullName = computed(() => {
      return person.firstName + "-" + person.lastName;
    }); */

    // 计算属性-完整写法(考虑读和写)
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        const nameArr = value.split("-");
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      },
    });
    // 返回一个对象(常用)
    return {
      person,
    };
  },
};
</script>
